<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>个人平台</title>
    <jsp:include page="../../../main/mp/inc.jsp"	/>
    <link rel="stylesheet" href="../resource/mp/_assets/css/scrollbar.css?_v=20150112">
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script type="text/javascript">
        document.addEventListener('touchmove', function(e) {
            e.preventDefault();
        }, false);
        //document.addEventListener('DOMContentLoaded', function() {setTimeout(loaded, 500);}, false);
        $(function(){
            $("[data-role='navbar']").navbar();
            $("[data-role='header'], [data-role='footer']").toolbar();
            var tmpl;
            //加载页面
            loadListviewScroll($("#listview-content"),{},function(rdata){
                if(rdata.result.errorCode=1){
                    $("#commentTmpl").tmpl(rdata.data).appendTo($("#listview-content ul"));
//                    if($("#navbar-msg").className='ui-btn-active'){
//                        $("#commentTmpl").tmpl(rdata.data).appendTo($("#listview-content ul"));
//                    }else{
//                        $("#announceTmpl").tmpl(rdata.data).appendTo($("#listview-content ul"));
//                    }

                }
                loaded()});
            $("#back_to_top").click(function(e){
                //myScroll.scrollTo(0, -100, 200);
                myScroll.scrollToElement('#scroller li:nth-child(1)', 300)
                e.preventDefault();
                e.stopPropagation();
            });

            $("#navbar-comment li a").click(function(e){
                var mpurl;
                var id = $(this).attr("id");
                switch(id){
                    case "navbar-msg":
                        mpurl = "<%=path%>/mp/ajax-comment/toUsersList";
                        tmplet="commentTmpl";
                        break;
                    case "navbar-tocreater":
                        mpurl = "<%=path%>/mp/index/notice";
                        tmplet="noticeTmpl";
                        break;
                    default:
                }

                $("#navbar-comment li").removeClass("ui-btn-active");
                $("#navbar-comment li a").removeClass("ui-btn-active");
                $("#"+id).addClass("ui-btn-active");
                $("#"+id).parent().addClass("ui-btn-active");

                //alert(id + " " + mpurl)
                $("#listview-content").attr("mp-url",mpurl);
                pullDownAction();
                e.preventDefault();
                e.stopPropagation();
            })
        });
    </script>

    <script id="commentTmpl" type="text/x-jquery-tmpl">
    {{each(i,comment) dataRows}}
            <li><a data-ajax="false"  href="\${comment.url}}">
            <h3>
            <i class="fa fa-user txt-color-green"></i>
            \${comment.creater}
            <span style="font-weight:normal;">
            在【 \${comment.theme}】
            </span>
            </h3>
            <p>进行了批注</p>
            <p>回复\${comment.atUsers}：\${comment.text}
            </p>
            <p ><strong> \${comment.createDate} </strong></p>
            </a>
            </li>
    {{/each}}
</script>

    <script id="noticeTmpl" type="text/x-jquery-tmpl">
    {{each(i,notice) dataRows}}
            <li>
        <a data-ajax="false"  href="\${notice.url}}">
            <span class="h2">\${notice.name}</span>
            <span class="subtitle">\${notice.content}</span>
            <p>
                <span>通知对象</span>
                <span>\${notice.call}</span>
            </p>
            <p ><strong> \${notice.createDate} </strong></p>
        </a>
    </li>
    {{/each}}
</script>
</head>
<body>
<!-- class="jqm-demos" -->
<div data-role="page"  data-theme="a">
    <div data-role="header" data-position="fixed" data-theme="a">
        <%--<h1 style="float:left;margin: 0 10px;"><i class="fa fa-bell"></i> 个人平台</h1>--%>
        <!-- 新建按钮 -->
        <jsp:include page="../../../main/mp/actions-popup.jsp"	/>
        <div data-role="navbar"  data-iconpos="left" id="navbar-comment">
            <ul>
                <li><a href="javascript:void(0)" data-ajax="false" id="navbar-msg" class="ui-btn-active">动态消息</a></li>
                <li><a href="javascript:void(0)" data-ajax="false" id="navbar-tocreater">通知一览</a></li>
            </ul>
        </div>
    </div><!-- /header -->

    <div style="top:76px;" class="ui-content jqm-content jqm-fullwidth" role="main" id="listview-content"
         mp-url="<%=path%>/mp/ajax-comment/toUsersList" >
        <!-- 固定视图滚动区域 -->
        <div id="scroller">
            <!-- 下拉按钮 new -->
            <div id="pullDown">
                <span class="pullDownIcon"></span> <span class="pullDownLabel">下拉松开刷新...</span>
            </div>
            <!-- data-filter="true" data-filter-theme="a" data-filter-placeholder="请输入客户名称..." -->
            <ul data-role="listview" data-theme="a" data-dividertheme="b"
                mp-page="1" mp-keyword="">

            </ul>
            <hr />

            <!-- 上拉按钮 new -->
            <div id="pullUp">
                <span class="pullUpIcon"></span><span class="pullUpLabel">上拉显示更多...</span>
            </div>
        </div>
    </div><!-- /content -->
    <!-- nav 导航 -->
    <jsp:include page="../../../main/mp/nav-panel.jsp"	/>


</div><!-- /page -->
</body>
</html>

<script type="text/javascript">
    $(function(){
        listSearch();
        $("#index_menu").css("background-color","#38c");
        $("#index_menu").css("color","#ddd");
    });
</script>
